import React, { Component } from "react";
import { ReloadOutlined, AimOutlined, FullscreenOutlined, SwapOutlined } from '@ant-design/icons'
import olMap from '../../utils/olMap'
import control, { MousePosition } from 'ol/control'
import { format, createStringXY } from 'ol/coordinate'
import "./index.scss"

interface Props {
    changeMapGL: () => void
}

export default class Footer extends Component<Props> {

    state = {
        moveLonLat: [0, 0], //鼠标移动的经纬度
        zoom: 0, //地图层级
    }

    componentDidMount(): void {
        setTimeout(() => {
            //鼠标获取坐标控件
            const mousePositionControl = new MousePosition({
                coordinateFormat: (coordinate: any): any => {
                    const newLonLat = [coordinate[0].toFixed(4) * 1, coordinate[1].toFixed(4) * 1]
                    return this.setState({
                        moveLonLat: newLonLat
                    })
                },
                projection: 'EPSG:4326',
                className: 'custom-mouse-position',
                target: document.getElementById('mouse-position') as any,
                undefinedHTML: ' '
            })
            olMap.map.addControl(mousePositionControl)
            olMap.map.on("moveend", (e: any) => {
                const zoom = olMap.map.getView().getZoom().toFixed(2)    //获取当前地图的缩放级别
                this.setState({
                    zoom
                })
            })
        })
    }

    //全屏
    fullScreen = () => {
        const isFullScreen = document.fullscreenElement
        isFullScreen ? document.exitFullscreen() : document.documentElement.requestFullscreen()
    }
    //重新加载 
    reload = () => {
        window.location.reload()
    }

    //初始化定位
    dingWei = () => {
        olMap.goView([120.2982, 29.4339], 8.12)
    }

    render() {
        const { moveLonLat, zoom } = this.state
        const { changeMapGL } = this.props

        return <div className='home-bottom'>
            <span className='bottom-message' style={{ marginLeft: "14px" }}>当前层级：{zoom}</span>
            <span className='bottom-message' style={{ marginLeft: "140px" }}>经度：{moveLonLat[0]}</span>
            <span className='bottom-message' style={{ marginLeft: "280px" }}>纬度：{moveLonLat[1]}</span>
            <FullscreenOutlined className='fullScreen' onClick={() => { this.fullScreen() }} />
            <ReloadOutlined className='reload' onClick={() => { this.reload() }} />
            <AimOutlined className='dingwei' onClick={() => { this.dingWei() }} />
            <SwapOutlined className='changeMap' onClick={changeMapGL} />
        </div>;
    }
}
